<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <div class="log_box">
                    <img src="@/assets/white.png" alt="">
                </div>
                <menus></menus>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="right_box">
                        <img src="@/assets/logged_in@3x.png" alt="">
                        <span>{{menuList.username}}</span>
                    </div>
                </el-header>
                <el-main><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import menus from './components/menus.vue';
import { mapState } from 'vuex';
export default {
    components: { menus },
    name: 'MyAppIndex',

    data() {
        return {

        };
    },

    mounted() {

    },
    computed: {
        ...mapState('login', ['menuList'])
    },
    methods: {

    },
};
</script>

<style lang="scss" scoped>
.el-container {
    width: 100vw;
    height: 100vh;
}

.el-header {
    background-color: #ffffff;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .right_box {
        img {
            width: 30px;
            vertical-align: middle;
        }

        span {
            color: #ff6040;
            margin-left: 8px;
        }
    }
}

.el-aside {
    background-color: #ff6043;
    color: #333;

    .log_box {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 70%;
            height: 70%;
        }
    }
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
}
</style>